<template>
  <div :style="{width:'100%',height:'100%'}" ref="homeEch"></div>
</template>

<script>
import user from '@/api/user';
export default {
  name: "Age",
  data() {
    return {
      data: [],
      agelist: [{}]
    };
  },
  created() {
    // this.echarts();
  },
  mounted() {
    this.echarts();
    this.resizefun = () => {
      this.$echarts.init(this.$refs.homeEch).resize();
    };
    window.addEventListener("resize", this.resizefun);
  },
  //移除事件监听，避免内存泄漏
  beforeDestroy() {
    window.removeEventListener("resize", this.resizefun);
    this.resizefun = null;
  },
  methods: {
    // 年龄比例接口
    echarts() {
      let that = this;
      let myChart = this.$echarts.init(this.$refs.homeEch);
        that.axios.get('https://map.honghengxinxi.com:4001/getCarTrend/monthly').then(
            res => {
                let data = res.data.data
                let option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['进', '出']
                        , textStyle: {
                            color: '#fff'
                        }
                    },

                    grid: {
                        top: 40,
                        x: 20,
                        y: 0,
                        x2: 0,
                        y2: 20,
                        right: 30
                    },
                    
animation: true ,
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: data.names
                        , axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff',

                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff',

                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    series: [
                        {
                            name: '进',
                            type: 'line',
                            data: data.list[0].value,
                            markPoint: {
                                data: [
                                    { type: 'max', name: '最大值' },
                                    { type: 'min', name: '最小值' }
                                ]
                            },
                            itemStyle: {
                                color: '#87f7cf'
                            },
                            markLine: {
                                data: [
                                    { type: 'average', name: '平均值' }
                                ]
                            }
                        },
                        {
                            name: '出',
                            type: 'line',
                            data: data.list[1].value,
                            markPoint: {
                                data: [
                                    { name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }
                                ]
                            },
                            itemStyle: {
                                color: '#fc97af'
                            },
                            markLine: {
                                data: [
                                    { type: 'average', name: '平均值' },
                                    [{
                                        symbol: 'none',
                                        x: '90%',
                                        yAxis: 'max'
                                    }, {
                                        symbol: 'circle',
                                        label: {
                                            normal: {
                                                position: 'start',
                                                formatter: '最大值'
                                            }
                                        },
                                        type: 'max',
                                        name: '最高点'
                                    }]
                                ]
                            }
                        }
                    ]
                }

                myChart.setOption(option);
            })
    }
  }
};
</script>

<style>
</style>
